<template>
	<view>
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<u-toast ref="uToast"></u-toast>
		<view class="page">
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
					<u-form labelPosition="left" :model="equipmentForm" ref="form1">
						<u-form-item label="标题" borderBottom prop="name" ref="item1">
							<u-input border="none" maxlength="20" v-model="equipmentForm.name" placeholder="请输入意见标题">
							</u-input>
						</u-form-item>
						<u-form-item label="内容" borderBottom prop="description" ref="item2">
							<u--textarea confirmType='done' placeholder="请输入您的意见" v-model="equipmentForm.description"
								maxlength="100" :count="true"></u--textarea>
						</u-form-item>
						<u-form-item label="图片" borderBottom prop="picUrl" ref="item3">
							<u-upload name="picUrl" :fileList="fileList" @delete="deletePic" :previewFullImage="true"
								:maxCount="4">
							</u-upload>
							<view v-show="photoshow">
								<u-button shape='circle'
									color="linear-gradient(to right, rgb(6, 169, 237), rgb(96, 221, 165))"
									type="success" icon="camera" @click="chooseImg" text="选择图片"></u-button>
							</view>
						</u-form-item>
					</u-form>
					<view style="width: 90%; margin:10% auto;">
						<u-button shape='circle' type="primary" text="提交" @click="submit">
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<gmy-img-cropper ref="gmyImgCropper" cropperType="ratio" fileType="jpg" imgSrc="" @getImg="getImg">
		</gmy-img-cropper>
	</view>
</template>

<script>
	import gmyImgCropper from "../../components/gmy-img-cropper/gmy-img-cropper.vue"
	export default {
		components: {
			gmyImgCropper
		},
		data() {
			return {
				photoshow: true,
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#2979FF",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "意见反馈",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				userinfo: '',
				equipmentForm: {
					name: '',
					description: ''
				},
				fileList: [],
				addlist: [],
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '标题名称不能为空',
						trigger: ['blur', 'change']
					},
					'description': {
						type: 'string',
						min: 3,
						max: 100,
						required: true,
						message: '反馈内容字数不能少于3个字并且不能超过100个字',
						trigger: ['change']
					}
				}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
		},
		methods: {
			//删除照片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.addlist.splice(event.index, 1)
				if (this.fileList.length !== 4) {
					this.photoshow = true;
				} else {
					this.photoshow = false;
				}
			},
			//选择
			chooseImg() {
				this.$refs.gmyImgCropper.chooseImage();
			},
			//裁剪
			getImg(e) {
				const result = this.uploadFilePromise(e);
				this.fileList.push({
					status: 'success',
					message: '',
					url: e
				})
				if (this.fileList.length !== 4) {
					this.photoshow = true;
				} else {
					this.photoshow = false;
				}
				this.imgCropperShow = false;
			},
			//上传照片
			uploadFilePromise(url) {
				//压缩图片质量到百分之10
				uni.compressImage({
					src: url,
					quality: 10,
					success: res => {
						return new Promise((resolve, reject) => {
							let a = uni.uploadFile({
								url: getApp().globalData.serverAddress + this.$uri.Uri_Image
									.replace(
										"{userRealId}", this.userinfo.userRealId),
								filePath: res.tempFilePath,
								name: 'file',
								success: (res) => {
									if (res.statusCode !== 200) {
										this.$utils.showToast(this, '服务器错误,请联系技术支持人员!',
											'error');
										return
									}
									setTimeout(() => {
										resolve(res.data.data)
										var obj = JSON.parse(res.data);
										this.addlist.push({
											url: obj.data[0]
										})
									}, 1000)
								}
							});
						})
					}
				})
			},
			//提交意见
			submit() {
				let opinion = new Object();
				opinion.title = this.equipmentForm.name;
				opinion.content = this.equipmentForm.description;
				opinion.picUrl = '';
				// 当上传照片的数量不等于零时,进行赋值
				if (this.addlist.length > 0) {
					var arrlis = []
					for (let item of this.addlist) {
						arrlis.push(item.url)
					}
					opinion.picUrl = arrlis.join(",")
				}
				this.$refs.form1.validate().then(res => {
					uni.showLoading({
						title: "提交中...",
						mask: true,
					});
					uni.request({
						url: getApp().globalData.serverAddress + this.$uri.Uri_submitopinion.replace(
							"{userRealId}", this.userinfo.userRealId),
						data: JSON.stringify(opinion),
						dataType: "json",
						method: "POST",
						success: (res) => {
							if (res.statusCode !== 200) {
								this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
								return
							}
							if (res.data.code == 0) {
								this.$utils.showToast(this, '提交成功！', 'success', 2,
									'/pages/userCenter/opinionlist');
							} else {
								this.$utils.showToast(this, res.data.msg, 'error');
							}
						},
						fail: () => {
							this.$utils.showToast(this, '提交失败！', 'error');
						},
						complete: () => {
							uni.hideLoading();
						}
					})
				}).catch(errors => {
					this.$utils.showToast(this, '请填写正确的信息！', 'warning');
				})
			},
			//返回到意见列表页面
			onLeftClick() {
				uni.redirectTo({
					url: '/pages/userCenter/opinionlist'
				})
			}
		}

	}
</script>

<style lang="scss">
	.page {
		width: 90%;
		margin: 5% auto;
	}

	.u-input__content {
		z-index: 0;
	}

	.u-textarea {
		z-index: 0;
	}

	.u-upload__deletable {
		z-index: 0 !important;
	}
</style>